<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	header{
		height: 80px;
		/*width: 100%;*/
		background-color: black;

	}
	header:after,.div2:after,.div3:after{
		content: "";
		height: 0;
		display: block;
		clear: both;
	}
	ul{
		list-style: none;
	}
	.list>li{
		
		/*width: 90px;*/
		/*background-color: black;*/
		float: left;
		color: white;
	}
	.img1{
		margin-top: 20px;
	}
	.img2{
		margin-top: 25px;
		/*height: "100";*/
	}
	.img3{
/*		border-radius: 15px 15px 15px 15px;*/
		margin-top: 25px;
	}
	.one{
		padding-left: 20px;
		margin-top: 30px;
		font-size: 20px;


	}
	.two{
		padding-left: 20px;
		margin-top: 30px;
		font-size: 20px;

	}
	.three{

		padding-left: 120px;
		margin-top: 25px;
	}
	.list input{
			width: 300px;
			height: 30px;

	}
	.div1{
		margin: 35px;

	}

	.div1>a{
		text-decoration: none;
		font-size: 20px;
	}
	.bb{
		color: gray;
	}
	/*.div2:after{
		
	}*/
	.list1>li,.list2>li{
		/*padding-left: 20px;*/
		float: left;
		font-size: 20px;
	}
	.four,.list2bb{
		padding-left: 40px;

	}
	.frist{
		background-color: green;
		color: white;
	}
	.div3{
		margin: 40px;
	}
	.list2aa{
		text-decoration:underline;
		color: green;
	}
	/*.div4{
		background-image: url(image/star.png);
		background-repeat: no-repeat;
		background-size: 10px;
	}*/
	.div4{
		margin-left: 80px;
	}
	.div5,.div6,.div7,.div8{
		margin-left: 20px;
	}
	.div4cc{
		color: gray;
	}
	.div4dd,.div4ee,.div4ff{
		float: left;
	}
	.div4ee{
		/*padding-top: 20px;*/
		/*padding-left: 40px;*/
	/*	height:10px;*/
	}
	.div4,.div5,.div6,.div7,.div8{
		float: left;
	}
	

		
	</style>
</head>
<body>
	<header class = "head">

		<ul class = "list">
			<li class="img1"><img src="image/logo.png" alt=""></li>
			<li class= "one">精品课程</li>
			<li class = "one">微专业</li>
			<li class="one">下载APP</li>
			<li class="three">
				<input type="select" placeholder="搜索课程">
			</li>
			<li class="img2"><img src="image/search.png" alt=""></li>
			<li class="two">我的学习</li>
			<li class="two">消息</li>
			<li class="two">购物车</li>
			<li class="two">|</li>
			<li class="two">登陆/注册</li>
			<li class="img3"><img src="image/small.jpg" alt=""></li>
		</ul>
		
	</header>
	
	<div class = "div1">
		<a href="#" class = "aa">首页 ></a>
		<a href="#" class="bb">精品课</a>
	</div>

	<div class="div2">
		<ul class = "list1">
			<li class = "frist">全部</li>
			<li class = "four">办公效率</li>
			<li class="four">职业发展</li>
			<li class="four">编程开发</li>
			<li class="four">产品和设计</li>
			<li class="four">生活方式</li>
			<li class="four">升学辅导</li>
			<li class="four">语言学习</li>
		</ul>
	</div>

	<div class="div3">
		<ul class = "list2">
			<li class = "list2aa">畅销</li>
			<li class="list2bb">好评</li>
			<li class="list2bb">新课</li>
		</ul>
		
	</div>

	<div class="div4">
		<img src="image/1.png" alt="" class = "div4aa">
		<p class="div4bb">秋叶Office三合一</p>
		<p class="div4cc">幻方秋叶PPT</p>
		<img src="image/star.png" alt="" class="div4dd">
		<p class="div4ee">5</p>
		<p class="div4ff">(5346人学过)</p>
		<p class="div4gg" style="clear: both;">￥399.00</p>
	</div>
	<div class="div5">
		<img src="image/2.png" alt="" class = "div4aa">
		<p class="div4bb">PS教程超级合辑【800+集爆款课】</p>
		<p class="div4cc">设计软件通</p>
		<img src="image/star.png" alt="" class="div4dd">
		<p class="div4ee">5</p>
		<p class="div4ff">(18537人学过)</p>
		<p class="div4gg" style="clear: both;">￥199.00</p>
	</div>
	<div class="div6">
		<img src="image/3.jpg" alt="" class = "div4aa">
		<p class="div4bb">和秋叶一起学PPT</p>
		<p class="div4cc">幻方秋叶PPT</p>
		<img src="image/star.png" alt="" class="div4dd">
		<p class="div4ee">4.9</p>
		<p class="div4ff">(65834人学过)</p>
		<p class="div4gg" style="clear: both;">￥169.00</p>
	</div>
	<div class="div7">
		<img src="image/4.jpg" alt="" class = "div4aa">
		<p class="div4bb">街舞微信竖版视频零基础制作课程</p>
		<p class="div4cc">街舞影像人</p>
		<!-- <img src="image/star.png" alt="" class="div4dd"> -->
		<!-- <p class="div4ee">5</p> -->
		<p class="div4ff">180人学过</p>
		<p class="div4gg" style="clear: both;">￥298.00</p>
	</div>
	<div class="div8">
		<img src="image/5.png" alt="" class = "div4aa">
		<p class="div4bb">VIP学习卡使卖家快速成长</p>
		<p class="div4cc">齐论教育</p>
		<!-- <img src="image/star.png" alt="" class="div4dd"> -->
		<!-- <p class="div4ee">5</p> -->
		<p class="div4ff">35人学过</p>
		<p class="div4gg" style="clear: both;">￥3198.00</p>
	</div>




	
</body>
</html>